import React, { Component } from 'react';
import { Layout,Breadcrumb ,Typography,Divider,Row, Col,Input ,TreeSelect , Button } from 'antd';
import './index.css';
const { Title } = Typography;
const {Content } = Layout;
const { TreeNode } = TreeSelect;
const { TextArea } = Input;
export default class index extends Component {
   
    state = {
        name:'',
        id_card:'',
        age:'',
        valueDoctorName:'',
        bed_id:'',
        phone:'',
        disease:'',
        Department_id: undefined,
      };
      changValue(ev,key){
        this.setState({
            [key]:ev.target.value
        });
    }

      onChangeDepartment = Department_id => {
        console.log(Department_id);
        this.setState({ Department_id });
      };
      addPatient=()=>{
        console.log(this.state)
      }
    render() {
        return (
            <Layout className="layout">
            <Content style={{ padding: '0 50px' }}>
              <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item>Home</Breadcrumb.Item>
                <Breadcrumb.Item>List</Breadcrumb.Item>
                <Breadcrumb.Item>App</Breadcrumb.Item>
              </Breadcrumb>
              <div className="site-layout-content">
              <Title level={3}>添加病人信息</Title>
              <Divider />
              <Row gutter={[0, 16]}>
                <Col span={12}>
                    <Title level={5}>病人姓名</Title>
                    <Input placeholder="姓名" style={{ width: '80%' }} size='large' allowClear="true" value={this.state.name} onChange={(ev)=>this.changValue(ev,"name")} />
                </Col>
                <Col span={12}>
                    <Title level={5}>科室</Title>
                    <TreeSelect
                        showSearch
                        style={{ width: '80%' }}
                        value={this.state.Department_id}
                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                        placeholder="科室"
                        allowClear
                        treeDefaultExpandAll
                        onChange={this.onChangeDepartment}
                        size='large'
                    >
                         <TreeNode value="呼吸内科" title="呼吸内科"></TreeNode>
                        <TreeNode value="消化内科" title="消化内科"></TreeNode>
                        <TreeNode value="泌尿内科" title="泌尿内科"></TreeNode>
                        <TreeNode value="心内科" title="心内科"></TreeNode>
                        <TreeNode value="血液科" title="血液内科"></TreeNode>
                        <TreeNode value="内分泌科" title="内分泌科"></TreeNode>
                        <TreeNode value="神经内科" title="神经内科"></TreeNode>
                        <TreeNode value="儿科" title="儿科"></TreeNode>
                        <TreeNode value="感染科" title="普外科"></TreeNode>
                        <TreeNode value="骨科" title="骨科"></TreeNode>
                        <TreeNode value="妇科" title="妇科"></TreeNode>
                        <TreeNode value="产科" title="产科"></TreeNode>
                        <TreeNode value="神经外科" title="神经外科"></TreeNode>
                        <TreeNode value="肝胆外科" title="肝胆外科"></TreeNode>
                    </TreeSelect>
                </Col>
              </Row>
              <Row gutter={[0, 16]}>
                <Col span={12}>
                    <Title level={5}>身份证号</Title>
                    <Input placeholder="身份证号" style={{ width: '80%' }} size='large' allowClear="true" value={this.state.id_card} onChange={(ev)=>this.changValue(ev,"id_card")} />
                </Col>
                <Col span={12}>
                    <Title level={5}>年龄</Title>
                    <Input placeholder='年龄' style={{ width: '80%' }} size='large' allowClear="true" value={this.state.age} onChange={(ev)=>this.changValue(ev,"age")} />
                </Col>
              </Row>
              <Row gutter={[0, 16]}>
                <Col span={12}>
                <Title level={5}>主治医生</Title>
                    <Input placeholder='主治医生' style={{ width: '80%' }} size='large' allowClear="true" value={this.state.valueDoctorName} onChange={(ev)=>this.changValue(ev,"valueDoctorName")} />
                </Col>
                <Col span={12}>
                    <Title level={5}>病床</Title>
                    <Input placeholder="病床" style={{ width: '80%' }} size='large' allowClear="true" value={this.state.bed_id} onChange={(ev)=>this.changValue(ev,"bed_id")} />
                </Col>
              </Row>
              <Row gutter={[0, 16]}>
                <Col span={12}>
                    <Title level={5}>联系方式</Title>
                    <Input placeholder="手机号/座机号" style={{ width: '80%' }} size='large' allowClear="true" value={this.state.phone} onChange={(ev)=>this.changValue(ev,"phone")} />
                </Col>
              </Row>
              <Row gutter={[0, 16]}>
                <Col span={24}>
                    <Title level={5}>病因</Title>
                    <TextArea
                         value={this.state.disease} onChange={(ev)=>this.changValue(ev,"disease")}
                        placeholder="病因"
                        autoSize={{ minRows: 3, maxRows: 5 }}
                        style={{ width: '80%' }} 
                        size='large'
                        allowClear="true"
                    />
                </Col>
              </Row>
              <Row gutter={[0, 16]}>
                <Col span={6} offset={9}>
                    <Button type="primary" size='large' onClick={()=>this.addPatient()} block>添加</Button>
                </Col>
              </Row>
             </div>
            </Content>
          </Layout>
        )
    }
}
